package work.endlove.kuikly_demo.pages

import com.tencent.kuikly.core.annotations.Page
import com.tencent.kuikly.core.base.Color
import com.tencent.kuikly.core.base.ViewBuilder
import com.tencent.kuikly.core.directives.vfor
import com.tencent.kuikly.core.directives.vforIndex
import com.tencent.kuikly.core.pager.Pager
import com.tencent.kuikly.core.reactive.handler.observableList
import com.tencent.kuikly.core.views.List
import com.tencent.kuikly.core.views.Text
import work.endlove.kuikly_demo.base.NavBar

/*
vfor语句指令，是一个循环语句，它与kotlin语言的for语句的区别是，
vfor语句具有UI响应式更新UI的功能。
我们在使用vfor时，需要给它传递返回响应式容器的闭包,
这样当响应式容器更新时, 会自动触发vfor语句内的UI新建。

此时KuiklyCore会监测到list容器内元素有新增,
会自动调用vfor语句下的闭包创建第11个item。
值得一提的时，当数据list容器元素个数发生变化时，
KuiklyCore只会 进行增量的更新, 以达到最高的更新性能。

vforIndex语句指令是vfor的补充，它与vfor的区别是，
vforIndex语句指令的闭包除了列表元素外，
还会有index和count两个参数，用于表示当前循环的索引值。
* */

@Page("hello_4")
internal class HelloFourPage : Pager() {

    private var list by observableList<String>()

    override fun created() {
        super.created()
        // mock data
        for (i in 0 until 10) {
            list.add(i.toString())
        }
    }

    override fun body(): ViewBuilder {
        val ctx = this
        return {
            attr {
                backgroundColor(Color.WHITE)
            }

            NavBar {
                attr {
                    title = "VFor Page"
                }
            }

            List {
                attr {
                    flex(1f)
                }

                vfor({ ctx.list }) { item -> // 1
                    Text { // 2
                        attr {
                            text(item)
                            fontSize(20f)
                            fontWeightBold()
                        }
                    }
                }

                vforIndex({ ctx.list }) { index, count, _ ->
                    Text {
                        attr {
                            text("index: $index count: $count")
                            fontSize(20f)
                        }
                    }
                }
            }
        }
    }
}